<!-- dall3 -->
<template>
  <div class="prompt">
    <div>
      <el-text tag="b">描述3D模型是什么样的对象</el-text>
    </div>
    <el-input
      v-model="prompt"
      maxlength="1024"
      :rows="5"
      class="w-100% mt-15px"
      input-style="border-radius: 7px;"
      placeholder="例如：一个椅子，它有四条腿，一个座位和一个靠背。"
      show-word-limit
      type="textarea"
    />
  </div>
  <div class="hot-words">
    <div>
      <el-text tag="b">描述你想要的物品艺术风格</el-text>
    </div>
    <el-space wrap class="word-list">
      <el-button
        round
        class="btn"
        :type="selectArtStyle === artStyle.key ? 'primary' : 'default'"
        v-for="artStyle in artStyleList2"
        :key="artStyle.key"
        @click="handleArtStyleClick(artStyle.key)"
      >
        {{ artStyle.name }}
      </el-button>
    </el-space>
  </div>
  <div class="negative_prompt mt-15px">
    <div>
      <el-text tag="b">描述3d模型不应该是什么样子</el-text>
    </div>
    <el-input
      v-model="negativePrompt"
      maxlength="1024"
      :rows="5"
      class="w-100% mt-15px"
      input-style="border-radius: 7px;"
      placeholder="例如：家具不应是过度花哨纹理。"
      show-word-limit
      type="textarea"
    />
  </div>

  <div class="btns">
    <el-button type="primary" size="large" round :loading="createIn" @click="handleCreateThreed">
      {{ createIn ? '生成中' : '生成内容' }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
import {ThreedVO, ThreedApi, TextTo3dReqVO} from '@/api/ai/threed'
import {
  artStyleList2, AiPlatformEnum, AiCreateThreeDEnum
} from '@/views/ai/utils/constants'

const message = useMessage() // 消息弹窗

// 定义属性
const prompt = ref<string>('') // 描述3D模型是什么样的对象
const negativePrompt = ref<string>('') // 描述纹理不应该是什么样子
const selectArtStyle = ref<string>('realistic') // 艺术样
const createIn = ref<boolean>(false) // 生成中

const emits = defineEmits(['onCreateStart', 'onCreateComplete']) // 定义 emits

/** 艺术样式 */
const handleArtStyleClick = async (key: string) => {
  selectArtStyle.value = key
}

/** 填充值 */
const settingValues = async (threedVO: ThreedVO) => {
  prompt.value = threedVO.prompt;
  negativePrompt.value = threedVO.negativePrompt;
  selectArtStyle.value = threedVO.artStyle;
}

const handleCreateThreed = async () => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中
    createIn.value = true
    // 回调
    emits('onCreateStart', AiPlatformEnum.MESHY)
    const form = {
      platform: AiPlatformEnum.MESHY, // 平台
      model: AiPlatformEnum.MESHY, // 模型
      funcType: AiCreateThreeDEnum.TEXT_3D,
      prompt: prompt.value, // 提示词
      negativePrompt: negativePrompt.value, // 反向提示词
      artStyle: selectArtStyle.value, // 艺术样式
      mode: 'preview'
    } as TextTo3dReqVO
    // 发送请求
    await ThreedApi.generateTextTo3d(form)
  } finally {
    // 回调
    emits('onCreateComplete', AiPlatformEnum.MESHY)
    // 加载结束
    createIn.value = false
  }
}

/** 暴露组件方法 */
defineExpose({ settingValues })
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}

// 热词
.hot-words {
  display: flex;
  flex-direction: column;
  margin-top: 15px;

  .word-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 15px;

    .btn {
      margin: 0;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
